<template>
	<view class="page" :class="getThemeClass">
		<unavbar title="AI创作权益卡">
			<template #barRight>
				<view @click="openWin('../airdrop-bill/airdrop-bill')">使用详情</view>
			</template>
		</unavbar>
		
		<view class="my-wallet-card-box">
			<view class="my-wallet-card">
				<image :src="cardList[cardId].image" class="wallet-card-bg" mode=""></image>
			</view>
		</view>
		<view class="flex flex-wrap  u-m-30">
			<view class="card-item" v-for="(item,index) in cardList[cardId].list" :key="index">
				
				<image :src="item.img" style="width: 64rpx; height: 64rpx;" mode=""></image>
				
				<view class="u-m-t-10 u-font-24">{{item.title}}</view>
				<view class="u-m-t-10 text-tips u-font-24">{{item.text}}</view>
			</view>
		</view>
		
		<view class="card-guize u-m-30">
			<view class="card-guize-title text-tips text-bold" >{{cardList[cardId].title}}</view>
			<view class="card-guize-text text-tips">
				1、赠送3600积分(有效期6个月)
			</view>	
			<view class="card-guize-text text-tips">
				2、积分 AI创作均可用，当月未使用的积分次月过期后将清零3、超分钟和加速次数，各赠送20次;加速次数按2积分/次的规则赠送，权益卡有效期内有限
			</view>
			<view class="card-guize-text text-tips">
				4、免费创作藏品 25次，权益卡有效期内有效
			</view>
			<view class="card-guize-text text-tips">
				5、解锁全部专用模型
			</view>
			<view class="card-guize-text text-tips">
				6、使用风格模型进行创作可以查看创作参数
			</view>
			<view class="card-guize-text text-tips">
				7、创作高级设置支持设置更多参数
			</view>
			<view class="card-guize-text text-tips">
				8、权益卡可叠加购买，购买后立即生效
			</view>
			
		</view>
		
		<view v-if="cardList[cardId].isPay == 1">
			
			<view class="pay-item card-item flex justify-between flex-wrap align-center">
				<view class="card-item-pay flex justify-between flex-wrap align-center">
					<image src="/static/images/weChatRecharge.png" style="width: 64rpx; height: 64rpx;" mode=""></image>
					<text class="u-m-l-20">微信支付</text>
				</view>
				<view>
					<u-checkbox-group>
						<u-checkbox v-model="weChatChecked" :label-disabled="false" @change="payCheck"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="pay-item card-item flex justify-between flex-wrap align-center">
				<view class="card-item-pay flex justify-between flex-wrap align-center">
					<image src="/static/images/alipayTopUp.png" style="width: 64rpx; height: 64rpx;" mode=""></image>
					<text class="u-m-l-20">支付宝支付</text>
				</view>
				<view>
					<u-checkbox-group>
						<u-checkbox v-model="alipayChecked" :label-disabled="false" @change="payCheck"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			
			<view class="card-pay-btn flex justify-between flex-wrap align-center">
				<view><text>￥</text><text class="card-pay-price">{{cardList[cardId].price}}</text></view>
				<view class="pay-btn"><text>开通权益卡</text></view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardId: 0,
				weChatChecked: true,
				alipayChecked: false,
				cardList: [
					{
						id: 1,
						title: 'AI魔法体验卡规则',
						image: '/static/images/wallet/card11.png',
						list: [
							{
								img: '/static/images/wallet/card1-1.png',
								title: '赠送积分',
								text: '20积分',
								number: 20
							}
						],
						content: '',
						isPay: 0
					},
					{
						id: 2,
						title: '白银权益卡规则',
						image: '/static/images/wallet/card22.png',
						list: [
							{
								img: '/static/images/wallet/card2-1.png',
								title: '赠送积分',
								text: '500积分/月',
								number: 500
							},
							{
								img: '/static/images/wallet/card2-2.png',
								title: '免费创作藏品',
								text: '5次',
								number: 5
							}
						],
						isPay: 1,
						price: 66.66
					},
					{
						id: 3,
						title: '黄金权益卡规则',
						image: '/static/images/wallet/card33.png',
						list: [
							{
								img: '/static/images/wallet/card3-1.png',
								title: '赠送积分',
								text: '1800积分/月',
								number: 1800
							},
							{
								img: '/static/images/wallet/card3-2.png',
								title: '免费创作藏品',
								text: '12次',
								number: 12
							},
							{
								img: '/static/images/wallet/card3-3.png',
								title: '单张加速次数',
								text: '10次',
								number: 10
							},
							{
								img: '/static/images/wallet/card3-4.png',
								title: '超分辨次数',
								text: '10次',
								number: 10
							}
						],
						isPay: 1,
						price: 66.66
					},
					{
						id: 4,
						title: '铂金权益卡规则',
						image: '/static/images/wallet/card44.png',
						list: [
							{
								img: '/static/images/wallet/card4-1.png',
								title: '赠送积分',
								text: '500积分/月',
								number: 500
							},
							{
								img: '/static/images/wallet/card4-2.png',
								title: '免费创作藏品',
								text: '25次',
								number: 25
							},
							{
								img: '/static/images/wallet/card4-3.png',
								title: '单张加速次数',
								text: '20次',
								number: 20
							},
							{
								img: '/static/images/wallet/card4-4.png',
								title: '超分辨次数',
								text: '20次',
								number: 20
							}
						],
						isPay: 1,
						price: 66.66
					},
				]
			};
		},
		onLoad(option) {
			this.cardId = option.id
		},
		onShow() {
		},
		methods: {
			payCheck(){
				this.weChatChecked = !this.weChatChecked
				this.alipayChecked = !this.alipayChecked
			}
		},
		computed: {
		},
		watch: {
		},
	}
</script>

<style lang="scss" scoped>
	
	.my-wallet-card-box{
		padding: 15px 0px;
			
		
	}
	.my-wallet-card{
		margin: 0;
		padding: 0 30rpx;
		width: 100%;
		height: 270rpx;
		position: relative;
		overflow: hidden;
		.wallet-card-bg {
		    height: 270rpx;
		    position: absolute;
		    z-index: 0;
		}
	}
	.card-item{
		text-align: center;
		padding: 10rpx;
	}
	.card-guize{
		
		border-radius: 20rpx 20rpx 0 0;
		.card-guize-title{
			padding: 30rpx 0;
		}
		
		.card-guize-text{
			padding-bottom: 20rpx;
		}
	}
	.pay-item {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #3a3a3a;
		border-radius: 20rpx;
	}
	.card-item-pay {
		
	}
	.card-pay-btn{
		margin-top: 90rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		.card-pay-price{
			font-size: 50rpx
		}
		.pay-btn {
			background-color: #cbfe5d;
			border-radius: 20rpx;
			font-weight: 600;
			color: #000000;
			padding: 20rpx 70rpx;
		}
	}
	
</style>
